import React, { useMemo, useState } from 'react';
import { MessageOutlined, SearchOutlined } from '@ant-design/icons';
import { MenuProps } from 'antd/lib';
import { Layout, Image, message, Modal, Button, Menu, Input, Dropdown, Space, Avatar } from 'antd';
import { useTranslation } from 'react-i18next';
import { logout } from '@/pages/auth/authUtils';
import DeleteConfirmModal from '@/pages/datasets/components/DeleteConfirmModal';
import ResetPasswordModal from '@/pages/components/modal/ResetPasswordModal';
import { eventBus, EventNameEnum } from '@/utils/eventBus';
import '../style/index.css';
import { useUserInfo } from '@/store/userStore';
import { SvgIcon } from '@/components/icon';
import { useInitializeData } from '@/store/configStore';

interface DownProps {
  value: string;
  changeSearchValue: (e: React.ChangeEvent<HTMLInputElement>) => void;
  cancel?: () => void;
}

export default function RightDown({ value, changeSearchValue, cancel }: DownProps) {
  const [showSearch, setShowSearch] = useState<boolean>(false);
  const { t } = useTranslation();
  const [logoutVisible, setLogoutVisible] = useState(false);
  const [passwordModalVisible, setPasswordModalVisible] = useState(false);
  const {username} = useUserInfo();

  const handleLogoutConfirm = () => {
    setLogoutVisible(false);
    logout();
  };

  const { license_edition, allowLocalAccount } = useInitializeData();
  const isLocalAccount = useMemo(() => {
    if (!license_edition) {
      return false
    } else {
      return allowLocalAccount ? true : false
    }
  }, [allowLocalAccount, license_edition]);

  const items: MenuProps['items'] = [
    ...(isLocalAccount ? [
      {
      key: '1',
      label: (
        <div className="h-[30px] w-[80px] text-center leading-[30px]">
          {t('page.homePage.changeInformation')}
        </div>
      ),
      onClick: () => {
        setPasswordModalVisible(true);
      },
    }] : []),

    {
      key: '2',
      label: (
        <div className="h-[30px] w-[80px] text-center leading-[30px]">
          {t('page.homePage.logOut')}
        </div>
      ),
      onClick: () => {
        setLogoutVisible(true);
      },
    },
  ];

  // 移动端搜索框
  // const changeSearchValue = (e: any) => {
  //   eventBus.emit(EventNameEnum.sendSearchText, {
  //     value: e.target.value,
  //   });
  // };

  return (
    <div className="flex items-center">
      {showSearch ? (
        <div
          style={{
            position: 'absolute',
            top: 5,
            left: 0,
            width: '100%',
            height: '100%',
            zIndex: 1000,
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <Input
            onChange={changeSearchValue}
            allowClear
            prefix={<SearchOutlined className="text-1xl text-gray-400 " />}
            className="input h-[40px] rounded-[40px]"
            placeholder="请输入"
          />
          <div
            className="h-7 w-10  text-center text-[16px] text-[#7A82A8]"
            onClick={() => {
              cancel && cancel();
              setShowSearch(false);
            }}
          >
            取消
          </div>
        </div>
      ) : (
        <div className='flex items-center justify-center'>
          <SearchOutlined
            className="pr-3 text-[22px]  text-[#7A82A8]"
            onClick={() => setShowSearch(true)}
          />
          <Dropdown trigger={['click']} menu={{ items }} arrow placement="bottomRight">
            <Button type="text" size="small">
              <Space>
                {/* <MessageOutlined className="text-[22px]  text-[#7A82A8]" /> */}
                {/* <Avatar
                  className="h-10 w-10 transform-none cursor-pointer px-0 hover:scale-105 !bg-[var(--brand-color)]"
                >
                  {username && username[0]}
                </Avatar> */}
                <SvgIcon icon="ic-avatar" size="32" className="mr-2 rounded-md" />
              </Space>
            </Button>
          </Dropdown>
        </div>
      )}

      <DeleteConfirmModal
        visible={logoutVisible}
        text="确定要退出登录吗?"
        onCancel={() => {
          setLogoutVisible(false);
        }}
        onConfirm={handleLogoutConfirm}
        onConfirmText="退出登录"
      />

      <ResetPasswordModal
        visible={passwordModalVisible}
        onCancel={() => setPasswordModalVisible(false)}
      />
    </div>
  );
}
